
<template>
  <el-button
      type="primary"
      icon="el-icon-plus"
      @click="handleAdd"
      v-if="props.RoleOperationId===1">
    批量上传产品
  </el-button>
  <el-dialog
      v-if="props.RoleOperationId===1"
      :title="addSomeProducts"
      v-model="someProductsForm"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
  >
    <el-form
        ref="productFormRef"
        :model="productsForm"
        label-width="120px"
        label-position="right"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="产品名称" prop="productName">
            <el-select
                v-model="productsForm.productName"
                placeholder="请选择产品名称"
                filterable
                clearable
                style="width: 100%"
                @change="handleProductChange"
            >
              <el-option
                  v-for="op in productNames"
                  :key="op.productId"
                  :label="op.productName"
                  :value="op.productName"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="录入产品数量" prop="count">
            <el-input v-model="productsForm.count" placeholder="请录入产品数量"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计量单位" prop="unitOfMeasure">
            <el-input
                v-model="productsForm.unitOfMeasure"
                placeholder="如：件、kg、m"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="关联工序" prop="operationId" required>
        <el-select
            v-model="productsForm.operationId"
            placeholder="请选择关联工序"
            filterable
            clearable
            style="width: 100%"
        >
          <el-option
              v-for="op in props.operationOptions"
              :key="op.value"
              :label="op.label"
              :value="op.value"
          />
        </el-select>
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="更新时间" prop="updatedAt">
            <el-date-picker
                v-model="productsForm.updatedAt"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="选择更新时间"
                style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelProductForm">取 消</el-button>
          <el-button
              type="primary"
              @click="submitProductsForm"
              :loading="submitLoading"
          >
            确 定
          </el-button>
        </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import {insertProductionWithCount} from "@/api/production-service/productionProducts.js";
import {ElMessage} from "element-plus";
const productsForm =ref({
  productName: '',
  productDescription: '',
  operationId:'', // 默认关联当前工序
  unitOfMeasure: '',
  createdAt: new Date(),  // 初始化为null，由日期选择器控制
  updatedAt: null,   // 初始化为null，提交时自动生成
  count: null,
  productTypeId:''
})
const productNames=ref([])
const handleProductChange = (selectedProductName) => {
  if (selectedProductName) {
    const selectedProduct = productNames.value.find(
        p => p.productName === selectedProductName
    );
    if (selectedProduct) {
      productsForm.value.productTypeId = selectedProduct.productId; // 使用实际的 productId
      productsForm.value.unitOfMeasure = selectedProduct.unitOfMeasure || ''; // 同时可以更新其他字段
    }
  } else {
    productsForm.productTypeId = '';
    productsForm.unitOfMeasure = '';
  }
};
const someProductsForm=ref(false)
const props = defineProps({
  RoleOperationId: {
    type: Number,  // 根据实际类型调整（Number/Array等）
    default: () => []  // 默认值
  },
  getProductName: {
    type: Function,
    required: true,
  },
  operationOptions: {
    type: Array,
    required: true,
    default: () => [] // 默认值
  },
  addCount:{
    type:Function,
    required: true

  }
});
const handleAdd = ()=>{
  someProductsForm.value=true
}
const fetchProductNames = async () => {
  try {
    // 调用父组件传递的方法
    const data = await props.getProductName();
    console.log(data)
    productNames.value = data; // 假设返回的是产品列表数组
  } catch (error) {
    console.error('获取产品名称失败:', error);
  }
};

const cancelProductForm = ()=>{
  someProductsForm.value=false
}

const submitProductsForm  = async () => {
  console.log('完整提交数据:', productsForm.value);
 const response=await insertProductionWithCount(productsForm.value).then()
  if (response.code!=200){
    ElMessage.error("上传失败")
  }else{
    props.addCount(productsForm.value.count)
    ElMessage.success("上传成功")
  }

}
onMounted(fetchProductNames)
</script>
<style scoped lang="scss">

</style>